<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { getGoodsListApi } from '@/api/goods'
  import type { goodsListItem } from '@/types/goods'
  // 必须导入需要用到的页面生命周期（即使在当前页面上没有直接使用到）
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
  import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
  import useZPagingComp from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPagingComp.js'
  import { fullUrl, computeConversion } from '@/utils/common'
  import { pageUrl } from '@/utils/constants'

  const paging = ref()
  const dataList = ref<goodsListItem[]>([])
  // 类似mixins，如果是页面滚动务必要写这一行，并传入当前ref绑定的paging，注意此处是paging，而非paging.value
  useZPaging(paging)

  const props = withDefaults(
    defineProps<{
      query ?: any
      safeAreaInsetBottom ?: boolean
      options ?: any
    }>(),
    {
      query: () => [],
      safeAreaInsetBottom: false,
    },
  )

  const query = ref(props.query)
  // 左侧数据列表
  var LeftList = ref([])
  // 右侧数据列表
  var RightList = ref([])
  const queryList = (page : number, page_size : number) => {
    const params = {
      page,
      page_size,
      ...query.value,
    }

    getGoodsListApi(params).then((res) => {
      paging.value.complete(res.result.data);
      // dataList.value = res.result.data
      // console.log(dataList.value)

      // setTimeout(()=>{
      //   // 将商品信息列表分为左侧右侧两个部分
      //     for (let i = 0; i < dataList.value.length; i++) {
      //       if (i % 2 === 0) {
      //         LeftList.value.push(dataList.value[i])
      //       } else {
      //         RightList.value.push(dataList.value[i])
      //       }
      //     }

      // },10)
    })
  }

  const reload = () => {
    return paging.value.reload()
  }

  const refresh = () => {
    return paging.value.refresh()
  }

  const emits = defineEmits<{
    (e : 'refresher-status-changed', status : number) : void
  }>()

  const onRefresherStatusChange = (status : number) => {
    emits('refresher-status-changed', status)
  }

  onMounted(() => {

  })

  // 点击商品 跳转详情
  function ToDetail(id) {
    console.log("点击了商品", id)
  }

  defineExpose({ ...useZPagingComp(paging), reload, refresh })
</script>

<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" :safe-area-inset-bottom="props.safeAreaInsetBottom"
    @refresherStatusChange="onRefresherStatusChange" v-bind="props.options" :paging-style="{
      backGroundColor: '#fff',
    }">
    <template #top>
      <slot name="top"></slot>
    </template>
    <slot name="middle"></slot>
    <view class="list">

      <!-- <image class="image" mode="scaleToFill" :src="fullUrl(item.images[0])"></image>
        <view class="list-item-detail">
          <view class="name"> {{ item.name }} </view>
          <view class="price">
            <text class="small">$</text>
            <text class="price-now">{{ item.min_price }}</text>
            <text class="price-origin">{{ item.max_origin_price }}</text>
          </view>
          <view class="sale">
            <text>销量{{ computeConversion(item.total_sales) }}</text>
          </view>
        </view> -->

      <view class="waterfall">
        <view class="wt-left wt-list">
          <navigator class="list-item" v-for="(item, index) in dataList" :key="item.id"
            :url="`${pageUrl['goods-detail']}?id=${item.id}`">
            <view v-if="index % 2 === 0" class="wt-item" @click="ToDetail(item.id)">
              <view class="item-img">
                <image :src="fullUrl(item.images[0])" mode='widthFix'></image>
              </view>
              <!-- 介绍部分 -->
              <view class="introduce-section">
                <text class="title">{{item.name}}</text>
                <view class="price">
                  <text class="small">$</text>
                  <text class="price-now">{{ item.min_price }}</text>
                  <text class="price-origin">{{ item.max_origin_price }}</text>
                </view>
                <view class="sale">
                  <text>total sales: {{ computeConversion(item.total_sales) }}</text>
                </view>
              </view>
            </view>
          </navigator>
        </view>

        <view class="vt-right wt-list">
          <navigator class="list-item" v-for="(item, index) in dataList" :key="item.id"
            :url="`${pageUrl['goods-detail']}?id=${item.id}`">
            <view v-if="index % 2 !== 0" class="wt-item" @click="ToDetail(item.id)">
              <view class="item-img">
                <image :src="fullUrl(item.images[0])" mode='widthFix'></image>
              </view>
              <!-- 介绍部分 -->
              <view class="introduce-section">
                <text class="title">{{item.name}}</text>
                <view class="price">
                  <text class="small">$</text>
                  <text class="price-now">{{ item.min_price }}</text>
                  <text class="price-origin">{{ item.max_origin_price }}</text>
                </view>
                <view class="sale">
                  <text>total sales: {{ computeConversion(item.total_sales) }}</text>
                </view>
                <!-- <view class="tags-box">
                        <text>点击量：{{item.click_num}}</text>
                        <text>收藏量：{{item.fav_num}}</text>
                      </view> -->
              </view>
            </view>
          </navigator>
        </view>
      </view>
    </view>


  </z-paging>
</template>

<style lang="scss" scoped>
  :host {
    display: block;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5rpx;

    .list-item {
      width: calc(50vw - 20rpx);
      margin-bottom: 10rpx;
      border-radius: 8rpx;
      overflow: hidden;
      background-color: #fff;
    }

    .list-item-detail {
      padding: 10rpx 10rpx 20rpx;
    }

    .image {
      height: 320rpx;
      width: 100%;
    }

    .name {
      margin: 10rpx 0 10rpx;
      font-size: 20rpx;
      color: #262626;
      min-height: 70rpx;
      line-height: 1.4;
      max-height: calc(2 * 1.4 * 26rpx);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .price {
      line-height: 1;
      padding-top: 4rpx;
      color: #cf4444;
      font-size: 26rpx;

      &-origin {
        font-size: 20rpx;
        color: #999;
        text-decoration: line-through;
        margin-left: 10rpx;
      }
    }

    .small {
      font-size: 80%;
      position: relative;
      top: -1px;
    }

    .sale {
      display: flex;
      justify-content: flex-end;
      padding-top: 8rpx;
      font-size: 20rpx;
      color: #666666;
      font-weight: 400;
    }
  }

  .waterfall {
    display: flex;
    flex-direction: row;
    width: 740rpx;
    justify-content: center;
    overflow: hidden;
    margin-left: 10rpx;

  }


  .wt-list {
    width: 360rpx;
    display: flex;
    flex-direction: column;
    margin-right: 15rpx;
  }

  .wt-item {
    margin-bottom: 15rpx;
    background-color: #ffffff;
  }

  .item-img image {
    width: 100%;
  }

  /* 商品介绍 */
  .introduce-section {
    background: #ffffff;
    padding: 0rpx 12rpx;
  }

  .introduce-section .title {
    font-size: 24rpx;
    color: #303133;
    // height: 50rpx;
    line-height: 50rpx;
    display: block;
    width: 100%;
    // 溢出省略号
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  }

  .introduce-section .tags-box {
    display: flex;
    align-items: center;
    height: 30rpx;
    font-size: 20rpx;
    color: #909399;
  }
</style>
